import React, { Component } from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from "redux";
import { CommonTable } from 'components';
import SearchList from './SearchList/SearchList';
import { payReportAction } from './index';
import moment from "moment/moment";

class PayReport extends Component {
    columns = [
        {
            title: '放款时间',
            dataIndex: 'day',
            key: 'day'
        },
        {
            title: '今日总放款金额',
            dataIndex: 'totalMoney',
            key: 'totalMoney',
            render(text) {
                return text || 0;
            }
        },
        {
            title: '新客放款金额',
            dataIndex: 'newMoney',
            key: 'newMoney',
            render(text) {
                return text || 0;
            }
        },
        {
            title: '新客笔数',
            dataIndex: 'newCount',
            key: 'newCount',
            render(text) {
                return text || 0;
            }
        },
        {
            title: '新客件均',
            dataIndex: 'newPer',
            key: 'newPer',
            render(text) {
                return text || 0;
            }
        },
        {
            title: '老客放款金额',
            dataIndex: 'oldMoney',
            key: 'oldMoney',
            render(text) {
                return text || 0;
            }
        },
        {
            title: '老客笔数',
            dataIndex: 'oldCount',
            key: 'oldCount',
            render(text) {
                return text || 0;
            }
        },
        {
            title: '老客件均',
            dataIndex: 'oldPer',
            key: 'oldPer',
            render(text) {
                return text || 0;
            }
        },{
            title: '新客占比',
            dataIndex: 'newRate',
            key: 'newRate',
            render(text) {
                return text || 0;
            }
        },
        {
            title: '本月累计放款金额',
            dataIndex: 'monthMoney',
            key: 'monthMoney',
            render(text) {
                return text || 0;
            }
        }
    ]
    constructor(props) {
        super(props);
        this.state = {};
        this.searchParams = {
            time: [moment(0, 'HH'), moment({hour: 23, minute: 59, seconds: 59})]
        };
    }

    convertParams = () => {
        const { time, channelId } = this.searchParams;
        const isArr = Array.isArray(time) && time.length > 0;
        const startTime = isArr ? time[0].format('YYYY-MM-DD') : '';
        const endTime = isArr ? time[1].format('YYYY-MM-DD') : '';
        return { channelId, startTime, endTime };
    }
    // handlePageChange = (info) => {
    //     const { current, pageSize } = info;
    //     const params = this.convertParams();
    //     const { getTableData } = this.props;
    //     getTableData({ pageNum: current, pageSize, ...params });
    // }
    handleSearch = (obj) => {
        const { getTableData } = this.props;
        this.searchParams = obj;
        const params = this.convertParams();
        getTableData({ ...params });
    }
    componentDidMount() {
        const { getTableData, getSourceData } = this.props;
        const params = this.convertParams();
        getTableData({ ...params });
        getSourceData({ pageSize: 10000, pageNum: 1 });
    }

    render() {
        // const { tableData: { data, pagination }, loading, sourceData } = this.props;
        const { tableData: { data, pagination }, loading} = this.props;
        return (
            <div>
                {/* <SearchList handleSearch={this.handleSearch} initTime={this.searchParams.time} sourceData={sourceData}/> */}
                <SearchList handleSearch={this.handleSearch} initTime={this.searchParams.time} />
                <CommonTable
                    columns={this.columns}
                    handlePageChange={this.handlePageChange}
                    dataSource={data}
                    pagination={null}
                    loading={loading}
                />
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const { businessStatisticsState: { payReportState } } = state;
    return {
        tableData: payReportState['data'],
        loading: payReportState['loading'],
        sourceData: payReportState['sourceData']
    }
}
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: payReportAction.prGetTableData,
        getSourceData: payReportAction.prGetSourceData
    },dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(PayReport);